<template>
    <van-tabbar v-model="activeNumber" class="top">
        <van-tabbar-item @click="changeTab('home')">
            <template #icon="props">
                <img :src="props.active ? icon.active : icon.inactive" />
            </template>
            首页
        </van-tabbar-item>
        <van-tabbar-item @click="changeTab('personal')">
            <template #icon="props">
                <img :src="props.active ? icon2.active : icon2.inactive" />
            </template>
            个人中心
        </van-tabbar-item>
    </van-tabbar>
</template>

<script>
import istrue from "../assets/images/home/home_active.png";
import istrue01 from "../assets/images/home/home.png";
import mine from "../assets/images/home/personal_active.png";
import mine01 from "../assets/images/home/personal.png";

export default {
    name: "wd-tabbar", // 底部导航栏
    props: {
        active: {
            type: Number,
        },
    },
    data() {
        return {
            activeNumber: this.active,
            icon: {
                active: istrue,
                inactive: istrue01,
            },
            icon2: {
                active: mine,
                inactive: mine01,
            },
        };
    },
    mounted() {},
    methods: {
        changeTab(path) {
            let loacltion = window.location.href;
            let hash = loacltion.split("/");
            if (hash[hash.length - 1] == path) {
            } else {
                this.$router.push("/" + path);
            }
        },
    },
};
</script>

<style lang="less" scoped>
.van-tabbar-item--active {
    color: #428ffc;
}
.top_old {
    .van-tabbar-item {
        font-size: 16px;
    }
}
</style>
